<div class="field row radio"
	 	ng-click="setActiveField(field._id, index, true)"
	 	key-to-truthy key-char-truthy="y" key-char-falsey="n" 
	 	field="field"
        on-tab-key="nextField()"
        on-tab-and-shift-key="prevField()"
        on-valid-key="nextField()">
    <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
        <h3 class="row">
			<small class="field-number">
				{{index+1}}
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
			</small>
			{{field.title}}
            <span class="required-error" ng-show="!field.required">
                {{ 'OPTIONAL' | translate }}
            </span>
        </h3>
        <p class="row">
            {{field.description}}
        </p>
    </div>

    <div class="col-xs-12 field-input">
        <div class="row">
            <label class="btn btn-default col-md-2 col-sm-3 col-xs-7"
		style="background: rgba(0,0,0,0.1); text-align:left;">
                <input type="radio" value="true"
					class="focusOn"
                    style="opacity: 0; margin-left: 0px;"
                    ng-focus="setActiveField(field._id, null, false)"
					ng-model="field.fieldValue"
					ng-model-options="{ debounce: 250 }"
					ng-required="field.required"
                    ng-change="nextField()"/>
				<div class="letter">
					{{ 'Y' | translate }}
				</div>
				<span>{{ 'YES' | translate }}</span>
				<i ng-show="field.fieldValue === 'true'" class="fa fa-check" aria-hidden="true"></i>
            </label>
	</div>

	<div class="row" style="margin-top: 10px;">
            <label class="btn btn-default col-md-2 col-sm-3 col-xs-7"
		        style="background: rgba(0,0,0,0.1); text-align:left;">

                <input type="radio" value="false"
			        style="opacity:0; margin-left:0px;"
			        ng-focus="setActiveField(field._id, null, false)"
			        ng-model="field.fieldValue"
			        ng-model-options="{ debounce: 250 }"
			        ng-required="field.required"
			        ng-change="nextField()"/>
			    <div class="letter">
				    {{ 'N' | translate }}
			    </div>
			    <span>{{ 'NO' | translate }}</span>
                <i ng-show="field.fieldValue === 'false'" class="fa fa-check" aria-hidden="true"></i>
            </label>
        </div>
    </div>
</div>
<br>
